<template>
    <a-card hoverable style="width: 240px">
      <template #cover>
        <img alt="example" :src="url" />
      </template>
      <a-card-meta :title="title">
        <template #description>{{ desc }}</template>
      </a-card-meta>
    </a-card>
  </template>
<script lang="ts">
import { defineComponent,onMounted,ref,inject} from 'vue';
export default defineComponent({
    setup(){
       const url = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
       const desc =  ref("www.instagram.com")
       const title = ref("Europe Street beat")
       onMounted(()=> {
        const getNode: Function |undefined = inject<Function>("getNode");
        const node = getNode?.()
        desc.value = node.data?.desc
        title.value = node.data?.title
        url.value = node.data.url
        node?.on("change:data",({current})=>{
            console.log(current)
        })
       })
       return {
        url,
        desc,
        title
       }

    }
    
})
</script>
